import { useNavigate } from 'react-router-dom';
import styled from './index.module.css';
import { Input } from 'antd';
import { isLogin } from '@/views/utils';
import Order from '../../order/index';

const { Search } = Input;
export default function Header() {
    const nav = useNavigate();
    function goLogin() {
        nav('/login');
    }
    function signUp() {}
    function goCart() {
        nav('/cart');
    }
    function goOrder() {
        nav('/order');
    }
    return (
        <header className={styled.header}>
            <div className={styled.inline}>
                <div className="logo">
                    <a href="/">
                        <div className={styled.logo_top}>
                            <img src={require('@/assets/images/logo/logo.webp')} alt="" />
                            <span>GoFlashDeals</span>
                        </div>
                        <div className={styled.logo_bottom}>
                            <span>Save Time and $</span>
                        </div>
                    </a>
                </div>
                <div className="search">
                    <Search size="large" placeholder="input search text" style={{ width: 600 }} />
                </div>
                <div className={styled.login_logout}>
                    {isLogin() ? (
                        <>
                            <div onClick={goCart} className={[styled.cart].join(' ')}>
                                <span>Cart</span>
                                <i className="iconfont">&#xe726;</i>
                            </div>
                            <div className={styled.selfInfo} onClick={goOrder}>
                                Personal Order
                            </div>
                            <div className={styled.signOut} onClick={signUp}>
                                SIGN OUT
                            </div>
                        </>
                    ) : (
                        <div className={styled.signIn} onClick={goLogin}>
                            SIGN IN
                        </div>
                    )}
                </div>
            </div>
        </header>
    );
}
